<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link href="${pageContext.request.contextPath}/bettery/css/map.css" rel="stylesheet" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/dewei/js/jquery.js">
</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.validate.min.js">
</script>
		<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=e4e68a5cf6df32793a5c7f00e7d17253">
</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/bettery_common.js">
</script>
	</head>
	<body>
		<form id='searchForm'  method="post">
			<input type="hidden" value="${lat}" name='lat' id="hiddenLat" />
			<input type="hidden" value="${lng}" name='lng' id="hiddenLng" />
			<input type="hidden" value="${lat}"  id="hiddenbLat" />
			<input type="hidden" value="${lng}"  id="hiddenbLng" />
			<input type="hidden" id="carNo"  name="carNo"	value="${carNo}">
	<s:iterator value="ids" var="idss">
		<input type="hidden" value="${idss}" name='ids' />
	</s:iterator>
	<s:iterator value="buyNums" var="buyNum">
	    <input type="hidden" value="${buyNum}" name='buyNums' />
	</s:iterator>
	 <input type="hidden" value="${id}" name='id' />
	 <input type="hidden" value="${mendId}" name='mendId' id="hiddenMendianId" />
			
			<input type="hidden" id="tsss">
		</form>
		<div class="search_bar" style="" align="center">
			<span class='new-btn left'><a onclick="back();">返回</a> </span> 本网推荐附近门店
			<span class="new-btn  right"><a onclick="javascript:changeViewType(this);">列表</a> </span>
		</div>
		<div id='layer' class="mapContent" style='height: 100%; background: #fff; margin-top: 0px; padding-bottom: 0px; top: 45px; position: absolute;' align="center">
			<div class="container" id="mendianList">
				加载中。。。
			</div>
		</div>
		<div id="map" style='height: 100%; background: #fff; margin-top: 0px; padding-bottom: 0px; top: 45px; position: absolute;'></div>
		<div id='daohangInfo' class="footor_bar" style=''>
			<a href="#" style="float: right; top: 0px; text-decoration: none;" onclick='javascript:$("#daohangInfo").hide();'>点击关闭</a> 
			<div id="result" style='height: 135px; color: #000; bottom: 0px;'></div>
		</div>
		<script type="text/javascript">
var json = ${json};
var level=14;
var isList=false;
var findMarkflag=true;
var map1;
var _lat;
var _lng;var point;var point2;var points=new Array();var infowindows=new Array();var route_text, steps;var polyline,extra_line1,extra_line2;
var infowindowFocus;
var t=new Date();
$(function(){
	$("#tsss").val(t);
	validator = $("#searchForm").validate({});
	_lat = $("#hiddenbLat").val();
	_lng = $("#hiddenbLng").val();
    if (_lat && _lng)
	{
		if(isList){
			queryMendianList();
			$("#daohangInfo").hide();
		}else{
			loadMap();
		}
	}
});

function loadMap(){
	if(map1){
		$("#layer").hide();
		$("#map").show();
	}else if(_lat && _lng){
		if(!level){level=15;}
		map1 = new AMap.Map("map",{center:new AMap.LngLat(_lng, _lat),level:level});	
		$("#layer").hide();
		$("#map").show();
		AMap.event.addListener(map1,"click",function(e){if(infowindowFocus){infowindowFocus.close();$("#daohangInfo").hide();}});
		map1.plugin(["AMap.ToolBar"],function(){toolBar = new AMap.ToolBar();map1.addControl(toolBar);});
		point=new AMap.LngLat($("#hiddenbLng").val(),$("#hiddenbLat").val());
		var sicon = new AMap.Icon({
							image: "${pageContext.request.contextPath}/bettery/img/poi.png",
							size:new AMap.Size(44,44),imageOffset: new AMap.Pixel(-334, -180)
		});
		var marker = new AMap.Marker({
			icon:sicon,
			visible:true,position:point,
			map:map1,offset:{x:-16,y:-40}
		});
		marker.setMap(map1);addMarker();
		$("#layer").hide();
		$("#map").show();
	}
}
function addMarker(){
	findMarkflag = true;
	for( var i = 0; i < json.length; i = i + 1)
	{
		var html="";
		html += "<table style='font-size:12px;border:0px;'><tr><td style='width:100px;'>推荐门店：</td><td style='width:70%;text-align:left;'><b style='font-size:14px;'>"+ json[i].name+ "</b></td></tr>";
		html += "<tr><td style='vertical-align: top;'>门店地址：</td><td>"+ json[i].address+ "</td></tr>";
		html += "<tr><td style='vertical-align: top;'>门店编号：</td><td>"+ json[i].mendianNo+ "</td></tr>";
		html += "<tr><td style=''>门店电话：</td><td>"+ json[i].lxrTel+ "&nbsp;&nbsp;&nbsp;&nbsp;<span style='border: 1px solid #ccc;border-radius: 4px; margin: 0px 10px;text-align: center;width: 35px'><a style='text-decoration:none;'  href='tel:"+json[i].lxrTel+"'>直接呼叫</a></span> </td></tr>";				
		html += "<tr><td colspan='2'><span class='new-btn-blue'><a style='text-align:center;' onclick='javascript:submitDingdan("+ json[i].id+ ");'>确定</a></span><span class='new-btn-blue' ><a style='text-align:center;margin:0px;border:0;padding-left:0px;' onclick='javascript:daohang("+i+");'>导航</a></span></div>";
		html += "</td></tr></table>";
		points[i]=new AMap.LngLat(json[i].longitude,json[i].latitude);
		var marker=new AMap.Marker({
			icon:new AMap.Icon({size:new AMap.Size(28,37),image:"${pageContext.request.contextPath}/bettery/img/custom_a_j.png?v=1", imageOffset:new AMap.Pixel(-28*i,0)}),
			position:points[i]
		});
		marker.setMap(map1);
		infowindows[i] = new AMap.InfoWindow({content:html,size:new AMap.Size(260,160)});
		addEvent(marker,json[i].longitude,json[i].latitude, infowindows[i],map1,json[i].address,json[i].id,i,json[i].name,json[i].lxr,json[i].lxrTel);
		
		if (json[i].tuijian) {
			infowindows[i].open(map1,new AMap.LngLat(json[i].longitude,json[i].latitude));
			map1.panTo(new AMap.LngLat(json[i].longitude,json[i].latitude));
			infowindowFocus=infowindows[i];
		}
	}
}

function addEvent(marker,longitude,latitude, infowindow,map1,address,id,i,name,lxr,lxrTel)
{
	AMap.event.addListener(marker,"click",function(){
		infowindow.open(map1,new AMap.LngLat(longitude,latitude));
		point2=new AMap.LngLat(longitude,latitude);map1.panTo(point2);
		infowindowFocus=infowindows[i];
	});
}

function queryMendianList(){
	$("#layer").show();
	$("#map").hide();
	var html = "<div><ul>";
	if (json.length > 0) {
		for ( var i = 0; i < json.length; i = i + 1) 
		{
			var timage='${pageContext.request.contextPath}/bettery/img/category.jpg?v=2';
			var bg='i-bg-red';if(json[i].imageUrl){timage=json[i].imageUrl;}
			html+="<li style='background:#fff;'>";
			html+="<div class='list-item' style='padding-top:5px;'><div class='p'><img onclick=\"showBigImg('"+timage+"')\" src='"+timage+"' style='height:110px;width:110px;'></div>";
			html+="<div class='d'>";
			html+="<div class='title' style='padding-bottom:5px;margin-top: 5px;font-size: 14px;color:#454545'><b>"+json[i].name+"</b></div>";
			html+="<div  style='font-size: 12px;color:#797979'>编号："+json[i].mendianNo+"</div>";
			html+="<div style='padding-bottom:2px;font-size: 12px;color:#797979'>"+json[i].lxrTel+"<span class='right' style='border: 1px solid #ccc;border-radius: 4px; margin: 0px 10px;text-align: center;width: 35px'><a style='text-decoration:none;'  href='tel:"+json[i].lxrTel+"'>呼叫</a></span></div>";
			html+="<div  style='font-size: 12px;color:#797979'>"+json[i].address+"</div>";
			html+="<div><span class='new-btn  left' style='text-align:center;margin:0px;border:0;padding-left:0px;'><a onclick='submitDingdan("+json[i].id+");' style=\"background:url('${pageContext.request.contextPath}/bettery/img/qd.png');background-size:100% 100%;\"></a></span></div>";
			html+="</div>";
			html+="</div><img src='${pageContext.request.contextPath}/bettery/icons/bottom_1.png' style='margin:0;padding:0;display:block;height:1px;' width='100%'/></li>";
		}
	}
	else{
		alert("系统出现异常");
	}
	html+="</ul></div>";
	hideLoading();
	$('#mendianList').html(html);
}

function submitDingdan(id){
	$("#hiddenMendianId").val(id);
	if($("#tsss").val()==t){
		$("#searchForm").attr("action","saveDingdanMend.do").submit();
	}else{
		alert("表单重复提交");
	}
}

function changeViewType(obj){
	if(isList){
		isList=false;
		loadMap();
		$(obj).html("列表");
	}
	else{
		isList=true;
		queryMendianList();
		$("#daohangInfo").hide();$(obj).html("地图");
	}
}

function daohang(i){
	$("#daohangInfo").show();
	point2=points[i];
	/**var MDrive;map1.plugin(["AMap.Driving"], function(){var DrivingOption = {policy: AMap.DrivingPolicy.LEAST_TIME};MDrive = new AMap.Driving(DrivingOption); AMap.event.addListener(MDrive, "complete", driving_routeCallBack); MDrive.search(point, point2); });**/
	var MWalk;map1.plugin(["AMap.Walking"], function() {
		MWalk = new AMap.Walking();
		AMap.event.addListener(MWalk, "complete", driving_routeCallBack);
		MWalk.search(point, point2);
	});
}

function driving_routeCallBack(data){
	if(null!=polyline){
		polyline.hide( );
	}
	if(null!=extra_line1){
		extra_line1.hide();
	}
	if(null!=extra_line2){
		extra_line2.hide( );
	}
	var routeS = data.routes;
	if (null==routeS||routeS.length <= 0) {
		document.getElementById("result").innerHTML = "未查找到任何结果";
	}
	else{
		route_text="";
		for(var v =0; v< routeS.length;v++)
		{
		    steps = routeS[v].steps;var route_count = steps.length;var distance = routeS[v].distance;
			for(var i=0 ;i< steps.length;i++)
			{
				route_text +=  "&nbsp;"+(1+i) +"." +steps[i].instruction  + "<br/>";
			}
		}
		document.getElementById("result").innerHTML = route_text;drivingDrawLine();
	}
}
function drivingDrawLine(s)
{
	var extra_path1 = new Array();
	extra_path1.push(point);
	extra_path1.push(steps[0].path[0]);
	extra_line1 = new AMap.Polyline({
		map: map1,
		path: extra_path1,
		strokeColor: "#9400D3",
		strokeOpacity: 0.7,
		strokeWeight: 4,
		strokeStyle: "dashed",
		strokeDasharray: [10, 5]
	});
	var extra_path2 = new Array();
	var path_xy = steps[(steps.length-1)].path;
	extra_path2.push(point2);
	extra_path2.push(path_xy[(path_xy.length-1)]);
	
	extra_line2 = new AMap.Polyline({
		map: map1,
		path: extra_path2,
		strokeColor: "#9400D3",
		strokeOpacity: 0.7,
		strokeWeight: 4,
		strokeStyle: "dashed",
		strokeDasharray: [10, 5]
	});
	var drawpath = new Array();
	for(var s=0; s<steps.length; s++)
	{
		var plength = steps[s].path.length;
		for (var p=0; p<plength; p++) {
			drawpath.push(steps[s].path[p]);
		}
	}
	polyline = new AMap.Polyline({
		map: map1,
		path: drawpath,
		strokeColor: "#9400D3",
		strokeOpacity: 0.7,
		strokeWeight: 4,
		strokeDasharray: [10, 5]
	});
	if(infowindowFocus){
		infowindowFocus.close();
	}
	map1.panTo(point);
}

function showBigImg(img){
        $("<div id='bigImg' style='width:100%;margin-top:45px;'><img style='width:100%' onclick=\"showListImg();\"  src='" + img+ "'/></div>").appendTo("body");$("#bigImg").show();$("#layer").css("background-image","");$("#mendianList").hide();
        $("body").css("background-color","#333");
        var height=document.documentElement.clientHeight-45;

        var imgWidth = $("#bigImg").find("img").width();

       $("#bigImg").css("line-height",height*1.8-80+"px");
        $("#bigImg").css("height",height+"px");

        $("#bigImg").css("text-align","center");
        var winWidth = document.documentElement.clientWidth;

        $("#bigImg").find("img").css("max-width",winWidth+"px");
    }
function showListImg(){
	$("#bigImg").remove();
	$("#mendianList").show();
}
</script>
	</body>
</html>